<template>
	<view>
		<view class="container">
			<view class="blank"></view>
			<view class="item">
				<view class="title">食管癌</view>
				<view class="risk">风险等级: <text>{{getRisk(resData.esophagealCancerResult)}}</text></view>
				<view class="risk">{{resData.esophagealCancerSuggest}}</view>
			</view>
			<view class="blank"></view>
			<view class="item">
				<view class="title">胃癌</view>
				<view class="risk">风险等级: <text>{{getRisk(resData.gastricCancerResult)}}</text></view>
				<view class="risk">{{resData.gastricCancerSuggest}}</view>
			</view>
			<view class="blank"></view>
			<view class="item">
				<view class="title">结肠癌</view>
				<view class="risk">风险等级: <text>{{getRisk(resData.colonCancerResult)}}</text></view>
				<view class="risk">{{resData.colonCancerSuggest}}</view>
			</view>
			<view class="blank"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resData: null,
				riskMap: {
					1: "低风险",
					2: "中等风险",
					3: "高风险"
				}
			}
		},
		onShow() {
			this.resData = uni.getStorageSync("resData") || null
		},
		methods: {
			getRisk(val) {
				return this.riskMap[val]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f2f2f2;
		height: 100vh;
	}

	.item {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin: 0 15px;

		.title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			padding: 5px 0;
		}

		.risk {
			font-size: 14px;
			color: #666;
			padding: 5px 0;
			line-height: 30px;

			>text {
				padding-left: 10px;
				color: orange
			}
		}
	}
</style>